<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="js/echarts.js"></script>
    <script src="js/jquery-3.3.1.js"></script>
</head>

<body>
    <!---为ECharts准备一个具备大小（宽高）的DOM--->
    <div id="main" style="width: 900px; height: 600px"></div>
    <script type="text/javascript">
        //基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        myChart.setOption({  //指定图表的配置项和数据
            color: ['Purple', 'LimeGreen'],
            backgroundColor: 'rgba(128, 128, 128, 0.1)',  //rgba设置透明度0.1
            title: {  //配置标题组件
                text: '某学院各专业男女生统计',
                subtext: '2020年', top: 8, left: 66
            },
            tooltip: { trigger: 'axis' },  //配置工具箱组件
            legend: { data: ['男', '女'], top: 8 },  //配置图例组件
            toolbox: {  //配置工具框组件
                show: true, top: 8, left: 680,
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    magicType: { show: true, type: ['line', 'bar'] },
                    restore: { show: true },
                    saveAsImage: { show: true }
                },
            },
            calculable: true,
            xAxis: [{ type: 'category', data: [] }],  //配置x轴坐标系，对应各专业名称
            yAxis: [{ type: 'value' }],  //配置y轴坐标系
            series: [  //配置数据系列
                {
                    name: '男', type: 'bar',
                    data: [],  //设置对应下面男生数据
                    itemStyle: {
                        normal: {
                            label: {
                                show: true, position: 'top'
                            }
                        }
                    }
                },
                {
                    name: '女', type: 'bar',
                    data: [],  //设置对应下面数据中的女生数据
                    itemStyle: {
                        normal: { label: { show: true, position: 'top' } }
                    }
                }
            ]
        });
        //异步加载数据，第2步：异步获取数据并填充数据
        //myChart.showLoading();  //在加载数据前，显示加载动画
        myChart.showLoading({  //自定义的加载动画
            text: '请您稍稍休息片刻,loading data...',  //设置提示的文字
            color: 'blue',  //设置转动的圆圈的颜色
            textColor: 'red',  //设置文字的颜色
            maskColor: 'rgba(160, 255, 255, 0.2)'  //设置蒙版的颜色
        });

        //获取和处理数据
        $.get("data/ch6_5_3_data.json").done(function (data) {
            //var d = JSON.parse(data);  //设置json数据
            var boyList = [];  //设置男生数组
            var girlList = [];  //设置女生数组
            var specList = [];  //设置专业名称数组
            //循环获取男生数量、女生数量及专业名称
            for (var i = 0; i < data.data.length; i++) {
                if (data.data[i].sex == '男') {
                    boyList.push(data.data[i].value);
                    specList.push(data.data[i].specName);
                } else {
                    girlList.push(data.data[i].value);
                }
            }
            //将数据添加到数据图表中
            myChart.setOption({
                xAxis: { data: specList },  //设置显示各专业名称
                yAxis: {},
                series: [{ name: '男', type: 'bar', data: boyList },
                { name: '女', type: 'bar', data: girlList }]  //设置显示男女系列的数据
            });
        });
        myChart.hideLoading();  //加载数据完成后，隐藏加载动画
    </script>
</body>

</html>